<!--
 * @Author: your name
 * @Date: 2021-03-11 16:59:13
 * @LastEditTime: 2021-03-29 15:30:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \svn-solax-cloud-system\src\views\present.vue
-->
<template>
    <div class="main-box-present">
        <el-button type="primary" @click='show'>主要按钮</el-button>
        <el-button type="primary" @click='saveImg'>保存为图片</el-button>
        <el-button type="primary" @click='saveSvg'>保存为svg</el-button>
        <div class="dom-creat-mian-box">
            <canvas id='saveImg'></canvas>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import html2canvas from 'html2canvas';
import '../assets/js/canvas2svg.js'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            canvasDom:'',
            myMockContext:new C2S(500,500)
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        show(){
            let data = (localStorage.getItem('getDomData') && JSON.parse(localStorage.getItem('getDomData'))) || []
            if(data.length){
                for(let i=0;i<data.length;i++){
                    console.log(data[i]);
                    this.creatDom(data[i])
                }
            }
            
        },
        saveImg(){
            let that = this
            // let c=document.getElementById("saveImg");
            // let ctx=c.getContext("2d");
            // ctx.fillStyle="#FF0000";
            // ctx.fillRect(0,0,150,75);
            // this.myMockContext['getContext'] = (type)=>{
            //     return this.myMockContext
            // }
            // let c=document.getElementById("saveImg");
            // let ctx=c.getContext("2d");
            // this.myMockContext['scale'] = ctx.scale
            // console.log(ctx,'ctx');
            // console.log(this.myMockContext,'this.myMockContext');
            html2canvas(document.body,{
                // width:500,
                // height:500
            }).then(function(canvas) {
                // that.canvasDom = c
                document.querySelector('.dom-creat-mian-box').appendChild(canvas);
            });
        },
        saveSvg(){
            // console.log(this.canvasDom.getSerializedSvg(),'canvasDom');
            // var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height
            // console.log(myMockContext,'myMockContext');
            var draw = function(ctx) {
                //do your normal drawing
                ctx.fillRect(0,0,200,200);
                //etc...
            }
            // draw(myMockContext);
            console.log(this.myMockContext.getSerializedSvg(),'myMockContext');
        },
        creatDom(data){
            let numId = 'a' + this.returnNum(100000000, 999999999)
            let divModal = ''
            if(data.target == 'IMG'){
                divModal = `<img id="${numId}" src='${data.src}' class="${data.class}" style='${data.style}'></img>`
                
            }else if(data.target == 'I'){
                divModal = `<i id="${numId}"  class="${data.class}" style='${data.style}'></i>`
            }else if(data.target == 'DIV'){
                divModal = `<div id="${numId}" class="${data.class}" style='${data.style}'></div>`
                $('.main-box-present').append(divModal)
                // console.log(data.class.indexOf('lineGo'),"data.class.indexOf('lineGo')");
                if(data.class.indexOf('inputBox') != -1){
                    $(`#${numId}`).html(data.text).css('background-color','transparent')

                }
                if(data.class.indexOf('lineGo') != -1){
                    let triangleDom = `<div id="${numId}k" class='arrow-triangleDom' style='${data.arrowStyle}'></div>`
                    $(`#${numId}`).append(triangleDom)
                }
                return
            }
            $('.dom-creat-mian-box').append(divModal)
        },
        returnNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        },
    },
};
</script>

<style  lang="less" scoped>
.main-box-present{
    width: 100%;
    height: 100%;
    position: relative;
    .dom-creat-mian-box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .arrow-triangleDom {
        border-top: 5px solid transparent;
        border-left: 10px solid red;
        border-bottom: 5px solid transparent;
        width: 0;
        margin: 0px;
        height: 0;
        float: right;
        
    }
}
</style>
